<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="() => { vdata.searchData= {} }">
        <JeepaySearchInfoInput v-model:value="vdata.searchData.mchNo" placeholder="商户号" :textUpStyle="true" :mchNoAndName="true" showType="MCH" />
        <jeepay-text-up v-if="$hasAgentEnt()" v-model:value="vdata.searchData.agentNo" :placeholder="'代理商号'" />
        <jeepay-text-up v-model:value="vdata.searchData.trmNo" :placeholder="'设备号'" />
        <jeepay-text-up v-model:value="vdata.searchData.trmName" :placeholder="'设备名称'" />
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData.trmType" placeholder="设备类型">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="1">终端设备</a-select-option>
            <a-select-option value="2">扫码POS</a-select-option>
          </a-select>
        </a-form-item>
      </JeepaySearchForm>

      <!-- 列表渲染 -->
      <JeepayTable
        ref="infoTable"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="vdata.searchData"
        row-key="trmId"
        @btnLoadClose="vdata.btnLoading=false"
      >
        <template #topBtnSlot>
          <a-button v-if="$access('ENT_TERMINAL_ADD')" type="primary" @click="addFunc">
            <plus-outlined />新建
          </a-button>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'state'">
            <a-badge :status="record.state === 0?'error':'processing'" :text="record.state === 0?'禁用':'启用'" />
          </template>

          <template v-if="column.key === 'trmType'">
            <a-tag :color="record.trmType === 1 ? 'green' : 'orange'">{{ record.trmType === 1 ? '终端设备':'扫码POS' }}</a-tag>
          </template>

          <template v-if="column.key === 'mchName'">
            商户: {{ record.mchName }}<br>应用： {{ record.appId }}<br>门店： {{ record.storeId }}({{ record.storeName }})
          </template>

          <template v-if="column.key === 'defaultFlag'">
            <a-tag v-if="record.defaultFlag=== 1 " color="green">是</a-tag>
            <JeepayTableColState v-else :state="record.defaultFlag" :show-switch-type="$access('ENT_TERMINAL_EDIT')" :on-change="(state) => { return updateDefaultFlag(record.trmId, state)}" />
          </template>

          <template v-if="column.key === 'operation'">
            <!-- 操作列插槽 -->
            <JeepayTableColumns>
              <a-button v-if="$access('ENT_TERMINAL_EDIT')" type="link" @click="editFunc(record.trmId)">修改</a-button>
              <a-button v-if="$access('ENT_TERMINAL_SENDUP')" type="link" @click="channelBinFunc(record.trmId)">渠道报备</a-button>
              <a-button v-if="$access('ENT_TERMINAL_DEL')" type="link" style="color: red" @click="delFunc(record.trmId)">删除</a-button>
            </JeepayTableColumns>
          </template>
        </template>
      </JeepayTable>
    </a-card>
    <AddOrEdit ref="infoAddOrEdit" :callbackFunc="searchFunc" />
    <ChannelBind ref="channelBindRef" :callbackFunc="searchFunc" />
  </page-header-wrapper>
</template>
<script setup lang="ts">

import { API_URL_MCH_TERMINAL, req, reqLoad, $updateMchTermDefault } from '@/api/manage'
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
import AddOrEdit from './AddOrEdit.vue'
import ChannelBind from './ChannelBind.vue'
import router from '@/router'
const { $infoBox,$access, $hasAgentEnt } = getCurrentInstance()!.appContext.config.globalProperties

const channelBindRef = ref()
const infoAddOrEdit = ref()
const infoTable = ref()

const tableColumns = reactive([
  { key: 'trmName', dataIndex: 'trmName', title: '设备名称'},
  { key: 'trmNo', dataIndex: 'trmNo', title: '设备编号'},
  { key: 'trmType', dataIndex: 'trmType', title: '设备类型'},
  { key: 'detailAddress', dataIndex: 'detailAddress', title: '布放位置'},
  { key: 'mchNo', dataIndex: 'mchNo', title: '商户号'},
  { key: 'mchName', dataIndex: 'mchName', title: '详细信息'},
  { key: 'channelBindInfo', dataIndex: 'channelBindInfo', title: '渠道信息'},
  { key: 'defaultFlag', dataIndex: 'defaultFlag', title: '默认设备'},
  { key: 'state', dataIndex: 'state', title: '状态'},
  { key: 'createdAt', dataIndex: 'createdAt', title: '创建日期'},
  { key: 'operation', title: '操作',  fixed: 'right', align: 'center'}
])

const vdata : any = reactive({
  btnLoading: false,
  searchData: {}
})


// 请求table接口数据
function reqTableDataFunc(params: any) {
    return req.list(API_URL_MCH_TERMINAL, params)
  }
function searchFunc () { // 点击【查询】按钮点击事件
    infoTable.value.refTable(true)
  }

function addFunc () { // 业务通用【新增】 函数
    infoAddOrEdit.value.show()
  }
function editFunc (recordId: any) { // 业务通用【修改】 函数
    infoAddOrEdit.value.show(recordId)
  }

function channelBinFunc (recordId: any) { // 报备管理
    channelBindRef.value.show(recordId)
  }


// 更改是否默认
function updateDefaultFlag (recordId, state) {

    const title = state === 1 ? '确认[默认]该设备？' : '确认[取消默认]该设备？'
    const content = '开启默认后若没有明确指定设备则默认使用设备进行下单操作，注意： 有且只能有一个默认设备。'
    return $infoBox.confirmDangerPromise(title, content).then(res => {
        return $updateMchTermDefault(recordId, state)
    }).then( (res) => {
      infoTable.value.refTable(true)
      $infoBox.message.success('更新成功')
    })
  }


    // 删除商户
  function delFunc (recordId: any) {
    $infoBox.confirmDanger('确认删除？', '该操作将删除商户下所有配置及用户信息', () => {
        reqLoad.delById(API_URL_MCH_TERMINAL, recordId).then((res: any) => {
            infoTable.value.refTable(true)
            $infoBox.message.success('删除成功')
          })
    })
  }

</script>
